<template>
	<view class="content">
		<view class="text_body">
			<text class="text1">登录约课</text>
			<text class="text4">发现更大的世界</text>
		</view>
		<!-- <view class="_b">
			<text :style="{'border-bottom':adminType == 'login' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}" @click="adminType = 'login'">账号密码登录</text>
			<text :style="{'border-bottom':adminType == 'code' ? '6rpx solid rgba(18, 141, 247, 1)' : '6rpx solid transparent'}" @click="adminType = 'code'">验证码登录</text>
		</view> -->
		<view class="_input">
			<input type="text" :placeholder="adminType == 'login' ? '请输入您的账号/手机号' : '请输入您的手机号'" placeholder-class="_pl"
				v-model="req.mobile" />
		</view>
		<view class="_input">
			<input type="text" :placeholder="adminType == 'login' ? '请输入您的登录密码' : '请输入验证码'" placeholder-class="_pl"
				v-model="req.captcha" />
			<button class="sms" v-if="adminType == 'login'" @click="start"
				:disabled="showText">{{second ? second : '获取验证码'}}</button>
		</view>
		<button class="login" @click="mobilelogin">登录</button>
		<text class="passworld">已有账号，去登录</text>
		<view class="_check">
			<checkbox-group @change="checkbox">
				<label>
					<checkbox value="t" :checked="isShow" color="#0052D9" style="transform:scale(0.7)" />
					<text>登录/注册表示您同意<text style="color: #0052D9;">《用户协议》</text>和<text
							style="color: #0052D9;">《隐私政策》</text></text>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	import {
		mobilelogin,
		send
	} from '../../api/login.js';
	export default {
		data() {
			return {
				//用户登录类型
				adminType: 'login',
				//是否同意用户隐私政策协议
				isShow: false,
				//验证码倒计时
				second: 0,
				showText: false,
				req: {
					mobile: '', //手机号
					captcha: '', //验证码
					event: 'register', //注册：register，验证码登录：mobilelogin
				}
			}
		},
		methods: {
			/**
			@method 手机号短信验证码登录
			**/
			async mobilelogin() {
				try {
					const res = await mobilelogin(this.req);
					if(res?.code == 1 || res?.code == '1'){
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('userinfo', res.data.userinfo);
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 发送验证码
			**/
			async send() {
				try {
					const res = await send(this.req);
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/** 
			@method 用户隐私框
			**/
			checkbox(e) {
				console.log(e);
			},
			/**
			@method 保存密码到本地,读取则放在onShow函数使用uni.getStorageSync()读取本地账号密码
			**/
			user(e) {
				e.detail.value.length > 0 ? uni.setStorageSync('key', '存储的账号密码数据源') : uni.removeStorage({
					key: '要删除的数据源key'
				});
			},
			/**
			@method 验证码开始倒计时 setTimeout设置到时时间1000 == 1秒
			**/
			start() {
				this.second = 10;
				this.showText = true;
				this.req = {
					...this.req,
					...{
						event: 'mobilelogin'
					}
				};
				this.send();
				var interval = setInterval(() => {
					--this.second
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.showText = false;
				}, 10000);
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: linear-gradient(179deg, #EDF6FD 0%, #C8EEFD 19%, #FFFFFF 100%, #FFFFFF 100%);
	}
</style>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	//是否刘海屏
	.content {
		width: auto;
		padding: 30rpx;

		.text_body {
			width: 100%;
			margin-top: 120rpx;
			margin-bottom: 120rpx;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 54rpx;
				color: #333333;
			}

			.text1 {
				display: block;
			}

			.text4 {
				margin-top: 10rpx;
				display: block;
			}
		}

		._b {
			width: 60%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			margin-top: 120rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 30rpx;
				padding-bottom: 15rpx;
			}
		}

		._input {
			width: 100%;
			height: 95rpx;
			border-radius: 50rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 30rpx;

			input {
				width: 70%;
				height: 80rpx;
				padding-left: 40rpx;
			}

			._pl {
				font-size: 28rpx;
			}

			.sms {
				font-size: 28rpx;
				white-space: nowrap;
				color: rgba(18, 141, 247, 1);
				margin-right: 25rpx;
				background-color: transparent;
				border: none;
			}
		}

		.login {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			margin: 0px auto;
			outline: none;
			background: linear-gradient(270deg, #3078FF 0%, #009DFE 100%);
			color: #fff;
			font-size: 30rpx;
			margin-top: 140rpx;
		}

		.passworld {
			display: block;
			margin: 0px auto;
			text-align: center;
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
		}

		._check {
			width: 90%;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 40rpx;

			text {
				font-size: 28rpx;
			}
		}

		._user {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>